<template>
  <div>
    <el-card>
      <div style="padding: 0 0 20px 0;">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>统计报表</el-breadcrumb-item>
          <el-breadcrumb-item>时用电统计</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-form ref="form" :model="query" label-width="80px" :inline="true">
        <el-form-item>
          <el-date-picker v-model="query.date" type="date" value-format="yyyy-MM-dd" placeholder="日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select v-model="query.prjid" placeholder="所属项目">
            <el-option
              v-for="(item, index) in projectlist"
              :key="index"
              :label="item"
              :value="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch()">查询</el-button>
        </el-form-item>
      </el-form>
      <bar-chart :options="options" />
    </el-card>
  </div>
</template>

<script>
import { standingday } from '@/api/chart/hour.js';
import BarChart from './components/barchart';
import moment from 'moment';

export default {
  components: {
    BarChart,
  },
  data() {
    return {
      query: {
        date: moment().format('YYYY-MM-DD'),
        prjid: '0',
      },
      projectlist: {},
      options: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            name: '时间',
            axisTick: {
              alignWithLabel: true,
            },
            nameTextStyle: { color: '#ff0000' },
            axisLabel: {
              textStyle: {
                color: '#ff0000',
              },
            },
            axisLine: {
              lineStyle: {
                color: '#ff0000',
              },
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: 'kwh',
            nameTextStyle: { color: '#ff0000' },
            axisLabel: {
              textStyle: {
                color: '#ff0000',
              },
            },
            axisLine: {
              lineStyle: {
                color: '#ff0000',
              },
            },
          },
        ],
        series: [
          {
            name: '直接访问',
            type: 'line',
            barWidth: '60%',
            color: '#D53A35',
            data: [],
          },
        ],
      },
    };
  },
  created() {
   this.getData();
  },
  methods: {
    getData() {
      standingday(this.query).then((res) => {
        this.options.series[0].data = JSON.parse(res.data.seriesData).map(item=>{return parseFloat(item)});
        console.log(this.options.series.data,'data')
        let axisData = JSON.parse(res.data.dateArr);
        this.options.xAxis[0].data = axisData;
        this.projectlist = Object.assign(JSON.parse(res.data.projectlist), {
          0: '全部',
        });
        console.log(res, 'res....');
      });
    },
    convertSeries(seriesData) {
      let series = [];
      Object.values(seriesData).forEach((item) => {
        series.push({
          name: '',
          type: 'bar',
          stack: 'vistors',
          barWidth: '60%',
          data: item.data,
          label: {
            show: true,
            position: 'top',
          },
          animationDuration: 6000,
        });
      });
      return series;
    },
    onSearch() {
      this.getData();
    },
  },
};
</script>

<style scoped></style>
